import Taro, { Config } from '@tarojs/taro'
import { Button, Image, RichText, Text, View } from '@tarojs/components'
import './index.scss'
import '@/styles/common/goods-info.scss'
import classNames from 'classnames'
import { GOODS_TYPE } from "@/config/types"
import { filterGoodsInfo } from "@/utils/filter"
import { infoById } from '@/api/productApi'
import { formatHtml, showMemberPrice } from "@/utils/utils"
import {toCalcOrderPage, toMemberOpenPage, toCommentGoodsPage, toCalcVirtualOrder} from '@/utils/page_router'
import vipImg from '@/assets/icon/vip.png'
import FyComponent from "@/components/common/goods"
import SeckillCountdown from "@/components/countdown/seckill"
import {
  GoodsNavbar,
  Loading,
  TitleOne,
  AvatarList,
  GoodsCarousel,
  GoodsOneList,
  ShareImage,
  CommentGoods,
  GoodsSelect,
  BuyRecord
} from "@/components/index"
import GoodsFoot from "@/components/goods/goods-foot"
import ShopInfoOne from "@/components/shop/info-one";
import ShopInfoTwo from "@/components/shop/info-two";

export default class Index extends FyComponent {
  config: Config = {
    navigationStyle: 'custom'
  }

  componentWillMount() {
    this.getGoodsInfo()
    this.getGoodsPage()
    this.getCommentPage()
  }

  //  获取商品详情
  getGoodsInfo() {
    const { params } = this.$router
    infoById(params.id).then(res => {
      const {data} = res
      data.timestamp = Number(new Date())
      this.setState({
        goodsInfo: filterGoodsInfo(data),
        comboList: data.skuDetail || [],
        goodsImages: data.images
      }, () => {
        this.setState({
          loadingStatus: false
        })
        setTimeout(() => {
          this.getNodeLocation()
        }, 200)
      })
    }).catch(err => {
      console.log(err)
      setTimeout(() => {
        wx.navigateBack()
      }, 800)
    })
  }

  //  确认选择商品
  onConfirm(info, number) {
    if (info.type === GOODS_TYPE.VIRTUAL) {
      toCalcVirtualOrder({ id: info.productId, skuId: info.skuId, number, shopId: info.shopId })
    } else {
      toCalcOrderPage({ cartList: [{ id: info.productId, skuId: info.skuId, number }] })
    }
    this.setState({
      showSelect: false
    })
  }

  render() {
    const { opacity, nodeKey, nodeList, userInfo, goodsInfo, goodsList, showSelect, showShareImg, shareImg, commentRes, loadingStatus } = this.state
    const salesReport = goodsInfo.salesReport && goodsInfo.salesReport.map(i => i.userInfo && i.userInfo.headImg)
    const percent:any = (100 / nodeList.length).toFixed(2)
    return (<View className='goods-page'>
      {loadingStatus && <Loading/>}
      {/*<GoodsNavbar opacity={opacity}>*/}
      {/*  {console.log(nodeList)}*/}
      {/*  <View className='node-list'>*/}
      {/*    {nodeList.map((item, key) => {*/}
      {/*      return (<View key={item.id} className={classNames('node-item f-g-5', nodeKey === key && 'node-item__active')} onClick={this.onSwitchNode.bind(this, item, key)}>{item.name}</View>)*/}
      {/*    })}*/}
      {/*    <View className='under-line' style={{ left: `calc(${nodeKey * percent}% + (${percent}% / 2))` }}/>*/}
      {/*  </View>*/}
      {/*</GoodsNavbar>*/}
      <View className='goods-scroll'>
        <View id='goods-info' className='goods-card'>
          <GoodsCarousel fId={goodsInfo.timestamp} images={goodsInfo.images} video={{ url: goodsInfo.video, poster: goodsInfo.videoCoverImg }}/>
          <View className='goods-activity d-f a-i-s'>
            <View className='activity-left f-g-2 f-d-c'>
              <Text className='left-title'>库存告急</Text>
              <Text className='activity-desc p-t-10'>
                {goodsInfo.limitNumber ? `每人限购 ${goodsInfo.limitNumber}${goodsInfo.unitName}` : '限时抢购'}
              </Text>
            </View>
            <View className='activity-right f-g-8 f-d-c'>
              <Text className='activity-desc p-b-10'>距{goodsInfo.status ? '结束剩余' : '开始'}</Text>
              <SeckillCountdown seconds={goodsInfo.seconds}/>
            </View>
          </View>
          <View className='goods-head'>
            <View className='d-f a-i-c j-c-b'>
              <View className='price d-f a-i-b'>
                <View className='sale-price bnn-number'><Text className='price-unit'>￥</Text>{goodsInfo.salePrice}</View>
                {goodsInfo.originPrice * 100 > goodsInfo.salePrice * 100 && <View className='origin-price bnn-number m-l-10'>￥{goodsInfo.originPrice}</View>}
              </View>
              <View className='user-like f-g-5'>
                <Text className='like-icon bnn-icon m-r-10'>&#xe668;</Text>{goodsInfo.storeCount}人喜欢
              </View>
            </View>
            <View className='goods-name'>{goodsInfo.name}</View>
            <View className='stock-box d-f j-c-b'>
              <View className=''>已兑换{goodsInfo.salesNumber}{goodsInfo.unitName}</View>
              <View className=''>剩余库存{goodsInfo.stockNumber}{goodsInfo.unitName}</View>
            </View>
            {showMemberPrice(goodsInfo) && <View className='member-box d-f a-i-c j-c-b' onClick={() => toMemberOpenPage()}>
              <View className='member-left d-f a-i-c'>
                <Image src={vipImg} className='left-icon'/>
                <View className='left-text'>会员价<Text className='member-price'>￥{goodsInfo.memberPrice}</Text>{goodsInfo.saveMoney ? `省￥${goodsInfo.saveMoney}` : ''}</View>
              </View>
              <View className='member-right d-f a-i-c'>
                <View className='right-text'>{userInfo.isVip ? '' : '立即开通'}</View>
                <View className='right-icon bnn-icon'>&#xe866;</View>
              </View>
            </View>}
            {/*<View className='sales-record d-f j-c-b'>*/}
            {/*  <AvatarList list={salesReport} showMore/>*/}
            {/*  <View className='invite-btn d-f a-i-c' hoverClass='hover-class--btn' onClick={this.showShareImg.bind(this)}>分享给好友</View>*/}
            {/*</View>*/}
            {<View className='tip-list d-f f-w-w'>
              {goodsInfo.tips && goodsInfo.tips.map((str, k) => {
                return (<View key={k} className='tip-item d-f a-i-c'>
                  <View className='bnn-icon tip-icon'>&#xe645;</View>
                  <View className='tip-text l-h-o'>{str}</View>
                </View>)
              })}
            </View>}
          </View>
        </View>

        {/* --------------------------------- 店铺信息 --------------------------------- */}
        {goodsInfo.type === GOODS_TYPE.VIRTUAL && <View className='goods-card goods-card__body shop-card'>
          <View className='goods-card__head'>
            <TitleOne>商家信息</TitleOne>
          </View>
          <ShopInfoOne info={goodsInfo.shopSnap} className='shop-card__head'/>
          <View className='thin-border__b'/>
          <ShopInfoTwo info={goodsInfo.shopSnap} className='shop-card__foot'/>
        </View>}

        {/* --------------------------------- 用户评论 --------------------------------- */}
        {commentRes.list && commentRes.list.length && <View id='goods-comment' className='goods-card goods-card__body comment-card'>
          <View className='goods-card__head'>
            <TitleOne>用户评论</TitleOne>
          </View>
          <View className='comment-list'>
            {commentRes.list.map(info => {
              return (<CommentGoods key={info.id} info={info} className='comment-item'/>)
            })}
            <View className='see-more f-g-5' onClick={() => toCommentGoodsPage(goodsInfo.id)}>查看更多好评（{commentRes.totalCount}）</View>
          </View>
        </View>}

        <View className='goods-body'>
          {/* --------------------------------- 商品详情 --------------------------------- */}
          {goodsInfo.description && <View id='goods-desc' className='goods-card'>
            <View className='goods-card__head'>
              <TitleOne>商品详情</TitleOne>
            </View>
            <View className='rich-text-wrap goods-card__body'>
              <RichText nodes={formatHtml(goodsInfo.description)}/>
            </View>
          </View>}

          {/* --------------------------------- 商品推荐 --------------------------------- */}
          <View id='goods-hot' className='goods-card'>
            <View className='goods-card__head'>
              <TitleOne>更多美好生活</TitleOne>
            </View>
            <GoodsOneList list={goodsList}/>
          </View>
        </View>
        <View className='goods-foot--height'/>
      </View>

      <GoodsFoot
        menus={['home', 'user']}>
        <Button
          disabled={goodsInfo.disabled}
          className='goods-foot__btns-btn xf-btn xf-btn-primary'
          onClick={this.setState.bind(this, { showSelect: true })}>{ goodsInfo.disabledText || '立即购买' }</Button>
      </GoodsFoot>

      <BuyRecord/>
      <GoodsSelect goods={goodsInfo} isOpened={showSelect} onClose={this.setState.bind(this, { showSelect: false })} onConfirm={this.onConfirm.bind(this)}/>
      {/*<ShareImage isOpened={showShareImg} width={500} height={890} image={shareImg} onClose={this.showShareImg.bind(this, false)}/>*/}
    </View>)
  }
}
